<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row>
        <el-col>
          <el-button type="primary" @click="dialogVisible ">添加分类</el-button>
        </el-col>
      </el-row>
               <!-- //表格 -->
                <!-- index-text索引 show-index是否显示索引  stripe斑马纹
                columns 表格列配置，对应数据中对象中的key
                  border是否显示纵向边框-->
                  <!-- data=“其中放的是自己要渲染的数据，也就是接口请求到的（res.data.data）”
                  在data的runter{}中定义columns 使用插槽的方法渲染出来数据-->
          <tree-table class="tb-cate" index-text="#" show-index 
                :data="tableData" :columns="columns" :expand-type="false" :selection-type="false">
                 <template slot="isok" slot-scope="scope">
                   <i class="el-icon-success" v-if="scope.row.cat_deleted===false" style="color: lightGreen"></i>
                   <i class="el-icon-error" v-else style="color: red"></i>
                 </template>
                 <template slot="level" scope="scope">
                   <el-tag type="primary" effect="plain" size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
                   <el-tag type="success" effect="plain" size="mini" v-else-if="scope.row.cat_level === 1">二级</el-tag>
                   <el-tag type="warning" effect="plain" size="mini" v-else>三级</el-tag>
                 </template>
                 <template slot="opt" slot-scope="scope">
                   <el-button type="primary" icon="el-icon-edit" size="mini" @click="xiu(scope.row)">编辑</el-button>
                   <el-button type="danger" icon="el-icon-delete" size="mini" @click="sc(scope.row)">删除</el-button>
                 </template>
         </tree-table>
  </el-card>

    <!-- 添加分类 -->
    <el-dialog title="添加分类" :visible.sync="outerVisible" width="50%" @close="addCateDialogClosed">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="分类名称：" prop="cat_name">
          <el-input v-model="ruleForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类：">
          <!-- options 用来指定数据源 -->
          <!-- props 用来指定配置对象 -->
          <el-cascader :options="zxc" :props="xing"  clearable
             v-model="chen" change-on-select  @change="parentCateChanged"></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>


    <!-- 编辑 -->
     <el-dialog title="编辑分类" :visible.sync="editDialogVisible" width="50%" >
          <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px">
            <el-form-item label="分类名称" prop="cat_name">
              <el-input v-model="editForm.cat_name"></el-input>
            </el-form-item>
              </el-form>
         <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="xiugaiqd">确 定</el-button>
        </span>
      </el-dialog>
         <!-- 删除提示框 -->
         <el-dialog
                title="提示"
                :visible.sync="centerDialogVisible"
                width="30%">
                <span>删除这条用户的信息</span>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="centerDialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click=scqd>确 定</el-button>
                </span>
        </el-dialog>
  </div>
</template>

<script>
import { tableData, addfl,addbj,addsc} from "@/api/api.js";
export default {
  data() {
    return {
        outerVisible: false,// 添加显示与隐藏
        editDialogVisible:false,//编辑显示与隐藏
        centerDialogVisible:false,//删除显示与隐藏
        zxc: [],// 父级分类的列表
        chen: [], // 选中的父级Id数组
        ruleForm: {//表单对象
          cat_pid: 0, //分类父 ID
          cat_level: 0, //分类层级
          cat_name: ""
      },
      editForm:{//修改
        cat_name: '',
        cat_id:0
      },
      delete:{
          cat_id:''
      },
        rules:{
             cat_name: [
            { required: true, message: '请输入分类名称', trigger: 'blur' },
          ],
      },
      editFormRules:{
         cat_name: [
            { required: true, message: '请输入分类名称', trigger: 'blur' },
          ],
      },
      // 查询条件
      querInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
      // 商品分类的数据列表
      tableData: [
        // {
        //     "cat_id": 1,
        //     "cat_name": "大家电",
        //     "cat_pid": 0,
        //     "cat_level": 0,
        //     "cat_deleted": false,
        //     "children": [
        //         {
        //             "cat_id": 3,
        //             "cat_name": "电视",
        //             "cat_pid": 1,
        //             "cat_level": 1,
        //             "cat_deleted": false,
        //             "children": [
        //                 {
        //                     "cat_id": 6,
        //                     "cat_name": "曲面电视",
        //                     "cat_pid": 3,
        //                     "cat_level": 2,
        //                     "cat_deleted": false
        //                 },
        //                 {
        //                     "cat_id": 7,
        //                     "cat_name": "海信",
        //                     "cat_pid": 3,
        //                     "cat_level": 2,
        //                     "cat_deleted": false
        //                 }
        //             ]
        //         }
        //     ]
        // }
      ],
      // 为table指定列的定义
      columns: [
        { label: "分类名称", prop: "cat_name" },
        {
          label: "是否有效",
          prop: "cat_deleted",
          type: "template",
          template: "isok",
        },
        {
          label: "分类等级",
          prop: "cat_level",
          type: "template",
          template: "level",
        },
        {
          label: "操作",
          type: "template",
          template: "opt",
        },
      ],
      
     // 指定级联选择器的配置对象
      xing: {
        value: "cat_id", 
        label: "cat_name",
        children: "children",
        checkStrictly: true, //显示单选框按钮，单级也可选
        expandTrigger: "hover", //划上显示数据
      },
     
    };
  },
  created() {
    this.xuanran();
  },
  methods: {
    // 修改
    fd(){
        addbj(this.editForm).then(res=>{
        this.xuanran()
    })
      },
     //修改
    xiu(e){
    this.editForm.cat_name=e.cat_name,
    this.editForm.cat_id=e.cat_id
    this.editDialogVisible=true
   },
    // 修改确定
    xiugaiqd(){
      this.editDialogVisible=false
      this.fd()
      this.xuanran()
    },
    //删除方法
    scff(){
      addsc({id:this.delete.cat_id}).then(res=>{
        // console.log(res);
        this.xuanran()
      })
    },
    //删除
    sc(i){
      this.centerDialogVisible=true,
      // console.log(i);
      this.delete.cat_id=i.cat_id
    },
    //删除确定
    scqd(){
      this.centerDialogVisible=false,
      this.scff()
      this.xuanran()
    },
    // 获取商品分类数据
    async xuanran() {
      const res = await tableData({
        params: this.querInfo,
      });
      if (res.meta.status === 200) {
        this.$message.success("获取分类列表成功");
        this.tableData = res.data.result;
      }
    },
    // 点击按钮，展示添加分类的对话框
      dialogVisible () {
      this.xuan();
      this.outerVisible = true;
    },
    // 获取父级分类的数据列表
    async xuan() {
      const res = await tableData({
        params: { type: 2 },
      });
     if (res.meta.status === 200) {
        this.$message.success("获取分类中下列列表成功");
        this.zxc = res.data;
        // console.log(res.data);
      }
    },
    //点击确定
      add() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) return;
        const res = await addfl(this.ruleForm);
        if (res.meta.status === 201) {
          this.$message.success("添加分类成功！");
          this.outerVisible = false;
         this.xuanran();
        }
      });
    },
      // 清空，重置表单，对话框关闭
    addCateDialogClosed() {
      this.$refs.ruleForm.resetFields();
      this.chen = [];
      this.ruleForm.cat_level = 0;
      this.ruleForm.cat_pid = 0;
    },
    // 选择器发生变化触发这个函数
    parentCateChanged(){
         console.log(this.chen);
      if (this.chen.length > 0) {
        // 父级分类的Id
        this.ruleForm.cat_pid = this.chen[this.chen.length - 1];  
        this.ruleForm.cat_level = this.chen.length;
      } else {
        // 父级分类的Id
        this.ruleForm.cat_pid = 0;
        // 为当前分类的等级赋值
        this.ruleForm.cat_level = 0;
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.treeTable {
  margin-top: 15px;
}

.el-cascader {
  width: 100%;
}
.el-button--mini {
  padding: 6px 6px;
}
</style>
